<template>
  <div id="MidMenu">
    <div ref='midMenu' class='midMenu'>
      <router-link v-for='(item,key) in midMenus' :key='key' :to='item.link' :title='item.type' class='midMenus'
                   @click.native="tabTo(item.text)">
        <el-tag effect="plain" class='menuItem' :style="menuItemStyle(item.link)">
          {{ item.text }}
        </el-tag>
      </router-link>
    </div>
  </div>
</template>

<script>
import dict from '../../apis/Dict'

export default {
  name: 'MidMenu',

  data() {
    return {
      path: this.$route.path,
      initMenus: [
        {link: '/know?type=编程', type: '编程', text: '编程'},
        {link: '/know?type=机电', type: '机电', text: '机电'},
        {link: '/know?type=数学', type: '数学', text: '数学'},
        {link: '/know?type=物理', type: '物理', text: '物理'},
        {link: '/know?type=天文', type: '天文', text: '天文'},
        {link: '/create?type=AI助手', type: 'AI助手', text: 'AI助手'},
        {link: '/create?type=AI计算', type: 'AI计算', text: 'AI计算'},
        {link: '/info?type=热点', type: '热点', text: '热点'},
        {link: '/info?type=资讯', type: '资讯', text: '资讯'},
        {link: '/info?type=信息', type: '信息', text: '信息'},
        {link: '/space/webSave', type: '导航', text: '导航'},
        {link: '/space/blog', type: '博客', text: '博客'},
      ],
      midMenus: [],
      knowMidMenus: [
        {link: '/know', type: '全部', text: '全部'},
        /*  {link: '/know?type=编程', type: '编程', text: '编程'},
          {link: '/know?type=机电', type: '机电', text: '机电'},
          {link: '/know?type=数学', type: '数学', text: '数学'},
          {link: '/know?type=物理', type: '物理', text: '物理'},
          {link: '/know?type=天文', type: '天文', text: '天文'},
          {link: '/know?type=地理', type: '地理', text: '地理'},
          {link: '/know?type=化学', type: '化学', text: '化学'},
          {link: '/know?type=生物', type: '生物', text: '生物'},
          {link: '/know?type=医学', type: '医学', text: '医学'},
          {link: '/know?type=法学', type: '法学', text: '法学'},
          {link: '/know?type=外语', type: '外语', text: '外语'},
          {link: '/know?type=文学', type: '文学', text: '文学'},
          {link: '/know?type=艺术', type: '艺术', text: '艺术'},*/
      ],
      infoMidMenus: [
        {link: '/info', type: '全部', text: '全部'},
        {link: '/info?type=热点', type: '热点', text: '热点'},
        {link: '/info?type=资讯', type: '资讯', text: '资讯'},
        {link: '/info?type=信息', type: '信息', text: '信息'},
      ],
      createMidMenus: [
        {link: '/create', type: '全部', text: '全部'},
        {link: '/create?type=AI助手', type: 'AI助手', text: 'AI助手'},
        {link: '/create?type=AI计算', type: 'AI计算', text: 'AI计算'},
        {link: '/create?type=AI创作', type: 'AI创作', text: 'AI创作'},
        {link: '/create?type=智能化', type: '智能化', text: '智能化'},
      ],
      spaceMidMenus: [
        {link: '/space/webSave', type: '导航', text: '导航'},
        {link: '/building', type: '发布', text: '发布'},
        {link: '/space/blog', type: '博客', text: '博客'},
      ]

    }
  },
  created() {
    //console.log(this.path)
    this.midMenuShow()
  },
  props: {
    midMenuToLink: { //子组件通过props接受父组件的传值
      type: String,
      required: false,
    },
  },
  methods: {
    midMenuShow() {
      if (this.path === '/') {
        this.midMenus = this.initMenus
      }
      if (this.path === '/know' || this.path === '/know/detail') {
        this.list("know")
      }
      if (this.path === '/create' || this.path === '/create/detail') {
        this.midMenus = this.createMidMenus
      }
      if (this.path === '/info' || this.path === '/info/detail') {
        this.midMenus = this.infoMidMenus
      }
      if (this.path === '/space' || this.path === '/space/detail') {
        this.midMenus = this.spaceMidMenus
      }
      //console.log(this.midMenus)
    },
    menuItemStyle(link) {
      //decodeURI(url) 解码 unicode(url) 编码
      //console.log(decodeURI(this.$route.fullPath), link, link.split('?')[0] + '/detail?' + link.split('?')[1])
      if (!link.includes('?')) {
        if (this.$route.fullPath === link) {
          return "background: deepskyblue;"
        }
      } else {
        if (decodeURI(this.$route.fullPath).includes(link) || decodeURI(this.$route.fullPath).includes(link.split('?')[0] + '/detail?' + link.split('?')[1])) {
          return "background: deepskyblue;"
        }
      }
    },
    list(module) {
      dict.list({code: module + '_MODULE'}).then((res) => {
        if (res.status === 200 && res.data.data) {
          this.midMenus = res.data.data;
          this.midMenus.forEach(i => {
            i.link = "/" + module + "?type=" + i.text
          })
          this.midMenus = [{link: "/" + module, type: '全部', text: '全部'}].concat(this.midMenus)
        } else {
          console.log(res)
        }
      })
    },
    tabTo(to) {
      this.$emit("tabTo", to);//自定义事件  传递值“子向父组件传值”
    }
  }
}
</script>

<style scoped>
#MidMenu {
  color: white;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: absolute;
  height: 40px;
  width: 70%;
  margin-left: 15%;
  font-weight: initial;
  z-index: 2;
}

.midMenu {
  height: 30px;
  margin-top: -1.5%;
  text-align: center;
  overflow: auto;

}

.midMenus {
  padding: 3px;
}

.menuItem {
  width: 70px;
  height: 30px;
  font-size: 15px;
  color: lightcyan;
  background: #2a5caa;
  border: none;
  border-radius: unset;
  font-weight: initial;
}

.menuItem:hover {
  color: white;
  background: deepskyblue;
  /*box-shadow: 水平位置 垂直位置 模糊距离 阴影尺寸(影子大小) 内外阴影inset，默认外阴影 */
  box-shadow: 0 5px 10px 0 azure;
}

</style>
